<template>
  <div class="demo">
    <div class="demo-title">滑动</div>
    <div class="demo-content">
      <Radio.Group v-model:value="mode" :style="{ marginBottom: '8px' }">
        <Radio value="top">Horizontal</Radio>
        <Radio value="left">Vertical</Radio>
      </Radio.Group>
      <Tabs
        v-model:activeKey="activeKey"
        :tab-position="mode"
        :style="{ height: '200px' }"
        @tab-scroll="callback"
      >
        <Tabs.TabPane v-for="i in 30" :key="i" :tab="`Tab-${i}`">Content of tab {{ i }}</Tabs.TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Radio from '@sscd/radio';
  import Tabs from '@sscd/tabs';
  const mode: any = ref('top');
  const activeKey = ref(1);
  const callback = (val) => console.log(val);
</script>
